<template>
  <a-modal title="预览图片" :footer="null" :width="900" :visible="visible" @cancel="handleCancel">
    <a-spin :spinning="divLoading">
      <div style="text-align: center">
        <img :src="src" style="max-width: 99%" />
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { sysFileInfoPreview } from '@/api/modular/system/fileManage'

export default {
  data() {
    return {
      visible: false,
      src: '',
      divLoading: false
    }
  },
  methods: {
    /**
     * 初始化
     */
    preview(record) {
      this.visible = true
      this.divLoading = true
      this.sysFileInfoPreview(record)
      
    },

    /**
     * 获取图片并转为链接
     */
    sysFileInfoPreview(record) {
      sysFileInfoPreview({ id: record.id })
        .then(res => {
          this.divLoading = false
          this.downloadfile(res)
        })
        .catch(err => {
          this.divLoading = false
          this.$message.error('预览错误：' + err.message)
        })
    },

    /**
     * 转图片类型
     */
    downloadfile(res) {
      let blob = new Blob([res])
      this.src = window.URL.createObjectURL(blob)
    },

    handleCancel() {
      this.src = ''
      this.visible = false
    }
  }
}
</script>
